<style>
	*{margin:0;padding: 0;}
	#canvas{background:#f4f4f4;
			margin:100px auto auto auto;
			display:block;
			border:7px solid #3d3d3d;
			box-shadow:0 0 30px;
	}
	button{
		height:40px;
		width:100px;
		display:block;
		margin:45px auto ;
		border-radius: 25px;
	}
  </style>
 
 </head>
 <body>
	<canvas id="canvas" height="450" width="450"></canvas>
	<button id="restart">重新开始</button>
 </body>

<script>
 var chess=document.getElementById("canvas");
	var context=chess.getContext("2d");
	var me=false;
	var chessBorad=[];
	for(var i=0;i<15;i++){
		chessBorad[i]=[];
		for(var j=0;j<15;j++){
			chessBorad[i][j]=0;
		}
	}
    var restart=document.getElementById("restart");
    



 	function drawChessBorad(){
		context.strokeStyle="#4d4d4d";
		for(var i=0;i<15;i++){
			context.moveTo(15+i*30,15);
			context.lineTo(15+i*30,435);
			context.stroke();
			context.moveTo(15,15+i*30);
			context.lineTo(435,15+i*30);
			context.stroke();
		}
	}
	window.onload=function(){
		drawChessBorad();
    }
    


    
	function drawChess(i,j,me){
		context.beginPath();
		context.arc(15+j*30,i*30+15,13,0,Math.PI*2,false);
		context.closePath();
		context.stroke();
		var grd=context.createRadialGradient(15+j*30+2,i*30+15-2,10,15+j*30+2,i*30+15-2,0);
		if(me){
			grd.addColorStop(0,"#d1d1d1");
			grd.addColorStop(1,"#f9f9f9");
			chessBorad[i][j]=1;
		}else{
			grd.addColorStop(0,"#0a0a0a");
			grd.addColorStop(1,"#636767");
			chessBorad[i][j]=2;
		}
		context.fillStyle=grd;
		context.fill();
		}
	chess.onclick=function(e){
		var x=e.offsetX;
		var y=e.offsetY;
		var i=Math.floor(y/30);
		var j=Math.floor(x/30);
		if(chessBorad[i][j]==0){
			drawChess(i,j,me);
			win(i,j,me);
			me=!me;
		}
	}
	restart.onclick=function(){
		clearChess();
	}
	function clearChess(){
		chess.height=chess.height;
		drawChessBorad();	
    }
    


	function win(i,j,me){
		var count=[0,0,0,0,0,0,0,0];
		var state=[1,1,1,1,1,1,1,1];
		var color=1;
		if(me){color=1;}else{color=2;}
		for(var step=1;step<5;step++){
			if(state[0]==1&&i-step>=0&&j-step>=0){
				if(chessBorad[i-step][j-step]==color){count[0]++;}else{state[0]=2;}
			}
			if(state[1]==1&&i-step>=0){
				if(chessBorad[i-step][j]==color){count[1]++;}else{state[1]=2;}
			}
			if(state[2]==1&&i-step>=0&&j+step<15){
				if(chessBorad[i-step][j+step]==color){count[2]++;}else{state[2]=2;}
			}
			if(state[3]==1&&j+step<15){
				if(chessBorad[i][j+step]==color){count[3]++;}else{state[3]=2;}
			}
			if(state[4]==1&&i+step<15&&j+step<15){
				if(chessBorad[i+step][j+step]==color){count[4]++;}else{state[4]=2;}
			}
			if(state[5]==1&&i+step<15){
				if(chessBorad[i+step][j]==color){count[5]++;}else{state[5]=2;}
			}
			if(state[6]==1&&i+step<15&&j-step>=0){
				if(chessBorad[i+step][j-step]==color){count[6]++;}else{state[6]=2;}
			}
			if(state[7]==1&&j-step>=0){
				if(chessBorad[i][j-step]==color){count[7]++;}else{state[7]=2;}
			}
		}
		if((count[0]+count[4]+1)>=5||(count[1]+count[5]+1)>=5||(count[2]+count[6]+1)>=5||(count[3]+count[7]+1)>=5){
				if(me){
					alert("傻逼赢了");
				}else{
					alert("傻屌赢了");
				}
			}
	}
</script>













